<div ng-controller="AdminUserController" style="height: 1100px">
    <div class="pad_top">

        <button type="button" ng-click="newProfile.show=true" class="ice-button">
            Create Account
        </button>

        <span class="pull-right" style="border: 1px solid #ccc; margin-right: 12px;">
            <i class="fa fa-filter" style="background-color: #d9d9d9; padding: 5px; opacity: 0.7"></i>
            <input type="text" placeHolder="Filter by name or email" class="font-90em no_border"
                   ng-model="userListParams.filter"
                   ng-change="filterChanged()"/>
        </span>
    </div>

    <div class="pad_top panel panel-default font-95em" ng-show="newProfile.show">
        <div ng-if="newProfile.password" class="pad-8">
            Account successfully created
            <br><br>
            <b>Username</b>: {{newProfile.email}} <br>
            <b>Password:</b> {{newProfile.password}}
            <br><br>
            The password can be changed on the profile page.
            <br><br><br>

            &nbsp;&nbsp;
            <button type="button" class="btn btn-primary btn-sm"
                    ng-click="newProfile.show=false;newProfile.password=undefined">Ok
            </button>
            <br>
        </div>

        <form class="panel-body" role="form" ng-submit="createProfile()" ng-if="!newProfile.password">
            <div class="col-md-2 pad-top-5 text-right">
                <span style="white-space:nowrap">First name <span class="required">*</span> </span>
            </div>

            <div class="col-md-10 pad-top-5">
                <input type="text" class="input_box" ng-model="newProfile.firstName" maxlength="125"
                       style="width: 235px;">
            </div>
            <div class="col-md-2 pad-top-5 text-right">
                Last name <span class="required">*</span>
            </div>

            <div class="col-md-10 pad-top-5">
                <input type="text" class="input_box" ng-model="newProfile.lastName" maxlength="125"
                       style="width: 235px;">
            </div>

            <div class="col-md-2 pad-top-5 text-right">
                Email <span class="required">*</span>
            </div>

            <div class="col-md-10 pad-top-5">
                <input type="text" ng-model="newProfile.email" class="input_box" maxlength="125" style="width: 235px;">
            </div>

            <div class="col-md-2 pad-top-5 text-right">
                <span style="white-space:nowrap">Institution</span>
            </div>
            <div class="col-md-10 pad-top-5">
                <input type="text" class="input_box" ng-model="newProfile.institution" maxlength="125"
                       style="width: 235px;">
            </div>

            <div class="col-md-2 pad-top-5 text-right">
                <span style="white-space:nowrap">About</span>
            </div>
            <div class="col-md-10 pad-top-5">
                <textarea rows="3" cols="30" ng-model="newProfile.description" class="input_box"
                          placeholder="Enter profile description"></textarea>
            </div>

            <br>

            <div class="col-xs-offset-2 col-md-10 pad_top">
                <button type="submit" class="btn btn-xs btn-primary">Save</button>
                <button type="button" ng-click="newProfile.show=undefined" class="btn btn-xs btn-default">Cancel
                </button>
            </div>
        </form>
    </div>

    <div class="pad_top">
        <table cellspacing="0" class="table table-hover table-border-bottom" style="width: 98%"
               ng-class="{'opacity_4':loadingPage}">
            <thead>
            <tr>
                <th>&nbsp;</th>
                <th class="entry-table-header">Name</th>
                <th class="entry-table-header">Type</th>
                <th class="entry-table-header"># Entries</th>
                <th class="entry-table-header">Registered</th>
                <th class="entry-table-header">Last Login</th>
            </tr>
            </thead>
            <tbody>
            <tr data-ng-repeat="userItem in userList.users">
                <td class="table-row-index">
                    {{((userListParams.currentPage - 1) * userListParams.limit) + $index + 1 | number}}
                </td>
                <td class="no_wrap">
                    <a ng-href="profile/{{userItem.id}}">
                    <span ng-if="userItem.firstName && userItem.lastName">{{userItem.firstName}}
                    {{userItem.lastName}}</span>
                        <span ng-if="!userItem.firstName && !userItem.lastName">{{userItem.email}}</span></a>
                    <br>
                    <small class="color-888">{{userItem.email}}</small>
                </td>
                <td style="width:180px; white-space:nowrap; vertical-align: middle;">
                    <!-- Single button -->
                    <div class="btn-group" uib-dropdown>
                        <button type="button" class="btn btn-xs uib-dropdown-toggle" uib-dropdown-toggle
                                ng-class="{'btn-warning':userItem.isAdmin, 'btn-default':!userItem.isAdmin}">
                            {{userItem.accountType |capitalize}} <span class="caret"></span>
                        </button>
                        <ul class="uib-dropdown-menu">
                            <li ng-if="userItem.accountType != 'ADMIN'"
                                ng-click="setUserAccountType(userItem, 'ADMIN')"><a href="#">Admin</a></li>
                            <li ng-if="userItem.accountType != 'NORMAL'"
                                ng-click="setUserAccountType(userItem, 'NORMAL')"><a href="#">Regular</a></li>
                        </ul>
                    </div>
                </td>
                <td style="width:180px; white-space:nowrap; vertical-align: middle;">
                    <span class="label"
                          ng-class="{
                          'label-primary': userItem.userEntryCount,
                          'label-default': userItem.userEntryCount == 0}">{{userItem.userEntryCount | number}}
                    </span>
                </td>
                <td style="width:150px; vertical-align: middle">{{userItem.registerDate | date:'MMM d, yyyy'}}</td>
                <td style="width:150px; vertical-align: middle">
                    <span ng-show="userItem.lastLogin">{{userItem.lastLogin | date:'MMM d, yyyy'}}</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div ng-if="userList && userList.users.length > 0">
        <div class="col-md-5" style="padding-left: 0">
            <uib-pagination total-items="userList.resultCount" ng-change="userListPageChanged()"
                            ng-model="userListParams.currentPage"
                            max-size="maxSize" class="pagination-sm" items-per-page="15"
                            boundary-links="true"></uib-pagination>
        </div>

        <div class="col-md-7" style="margin-top: 25px;">
            <strong class="small">
                <i ng-show="loadingPage" class="fa fa-spin fa-gear opacity_4"></i>
                {{pageCounts(userListParams.currentPage, userList.resultCount, userListParams.limit)}}
            </strong>
        </div>

    </div>
</div>